<template>
  <div class="leftCpn">
    <ul>
      <li
        v-for="item in list"
        :key="item.id"
        @click="changPath(item.path)"
        :class="item.path === pathStu ? 'active' : ''"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          name: "用户管理",
          path: "/user",
        },
        {
          id: 2,
          name: "视频管理",
          path: "/video",
        },
        {
          id: 3,
          name: "数据管理",
          path: "/data",
        },
      ],
      pathStu: "/user",
    };
  },
  methods: {
    changPath(path) {
      this.$router.push(path);
      this.pathStu = path;
    },
  },
};
</script>

<style lang="scss" scoped>
.leftCpn {
  background-color: rgb(238, 173, 53);
  width: 220px;
  height: calc(100vh - 80px);
  ul {
    list-style: none;
    text-align: center;
    padding: 0;
    margin-top: 30px;
    li{
        font-size: 18px;
        margin: 10px 0;
    }
    li:hover{
        cursor: pointer;
    }
  }
  .active {
    color: rgb(197, 109, 77);
  }
}
</style>